<template>
	<HyCard title="抽取对象">
		<el-form class="w-full" ref="formRef" :model="form" label-width="auto">
			<el-form-item label="请选择抽取对象：" prop="extractionModeList" :rules="[{ required: true, message: '请选择抽取对象' }]">
				<el-checkbox-group @change="checkBoxChange" v-model="form.extractionModeList">
					<el-checkbox
						:disabled="props.routerParams.operateType !== 'add'"
						v-for="item in checkBoxArray"
						:label="item.label"
						:value="item.value"
						:key="item.label"
						>{{ item.label }}</el-checkbox
					>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<!-- 国家 -->
	</HyCard>
</template>
<script setup lang="ts">
import HyCard from '/@/components/HyCard/index.vue';
import { ElMessage } from 'element-plus';
const emits = defineEmits(['sendcheckData']);
const checkBoxChange = () => {
	emits('sendcheckData', form.extractionModeList);
};
const form: any = reactive({
	extractionModeList: [],
});
const checkBoxArray = [
	{
		value: 0,
		label: '专家',
	},
	{
		value: 1,
		label: '机构',
	},
];

const formRef = ref();
const submitForm = async () => {
	if (!formRef) return;
	return formRef.value.validate((valid: any) => {
		if (valid) {
			return true;
		} else {
			setTimeout(() => {
				const el = document.querySelectorAll('.el-form-item__error')[0];
				el.scrollIntoView({ block: 'center', behavior: 'smooth' });
			}, 100);
			ElMessage.error('表单中有必填项未填写，请检查并补全');
			return false;
		}
	});
};
const props = defineProps({
	detailData: {
		type: Object,
		default: () => {
			return {};
		},
	},
	routerParams: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
watch(
	() => props.detailData,
	(nv1: any) => {
		if (nv1 && nv1.length > 0) {
			form.extractionModeList = nv1;
			checkBoxChange();
		}
	},
	{ immediate: true }
);
defineExpose({ submitForm, form });
</script>
<style scoped lang="scss"></style>
